<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04v-for</title>
  <script src="vue(1).js"></script>
</head>
<body>
<div id="div">
  <input type="button" value="尾部添加" @click="addFoot()">
  <input type="button" value="头部添加" @click="addHead()">
  <ul>
    <!--v-for和v-if可以同时使用
    v-for v-if依托于标签
    -->
    <li v-for="(user,index) in users" v-if="index<2">
      {{index}}------{{user.id}}-----{{user.name}}
    </li>
  </ul>
  <ul>
    <template v-for="(value,key,index) in users[1]">
      <li>{{key}}</li>
      <li>{{value}}</li>
    </template>
  </ul>
  <ul>
    <li v-for="n in 5">{{n}}</li>
  </ul>
</div>
<script>
  var vm=new Vue({
    el:"#div",
    data:{
      users:[
        {id:1,name:"zs"},
        {id:2,name:"lisi"},
        {id:3,name:"ww"}
      ]
    },
    methods:{
      addFoot(){
        this.users.push({id:4,name:"王五"});
      },
      addHead(){
        this.users.unshift({id:5,name:"张三"})
      }
    }
  })
</script>
</body>
</html>